<template>
	<view class="cart-container">
		<view class="empty" v-if="isEmpty">
			<text>🛒</text>
			你没有添加任何商品
		</view>
		<view class="full" v-else>
			<!-- 地址 -->
			<view class="address-box">
				<view>
					<text class="label">收货人:</text>
					<text class="content">苏</text>
					<text class="phone">18888888888</text>
					<text class="arrow">></text>
				</view>
				<view>
					<text class="label">收货地址:</text>
					<text class="content">广东省广州市天河区</text>
				</view>
				<image src="/static/images/cart_border@2x.png" mode=""></image>
			</view>
			<!-- 标题 -->
			<view class="title">
				<text>🏪</text>
				<text>优购生活馆</text>
			</view>
			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in cartList" :key="item.goods_id">
					<text class="iconfont icon-checked"></text>
					<image :src="item.goods_small_logo" alt="" />
					<view class="right">
						<text class="text-line2">{{item.goods_name}}</text>
						<view class="btm">
							<text class="price">
								￥
								<text>{{item.goods_price}}</text>
								.00
							</text>
							<view class="goods-num">
								<button>-</button>
								<text>{{item.num}}</text>
								<button>+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="account">
				<view class="select-all">
					<text class="iconfont icon-unchecked"></text>
					<text>全选</text>
				</view>
				<view class="price-wrapper">
					<view class="price">
						<view>
							合计:
							<text class="num">￥{{totalPrice}}</text>
						</view>
						<text class="info">包含运费</text>
					</view>
				</view>
				<view class="account-btn">结算({{totalNum}})</view>
			</view>
		</view>
	</view>
</template>
<script>
// 导入辅助函数
import { mapState } from 'vuex';
export default {
	data() {
		return {
			// 购物车是否为空
			isEmpty: true,
			// 购物车商品数据
			cartList: []
		};
	},
	onShow() {
		// 如果有数据 就显示商品
		this.isEmpty = this.goodsList.length == 0;
		// 获取商品数据
		this.$request({
			url: '/api/public/v1/goods/goodslist',
			method: 'get',
			data: {
				goods_ids: this.goodsList.map(v => v.goods_id).join(',')
			}
		}).then(res => {
			console.log('res:', res);
			// 数组中的 每一项 和本地的购物车数据合并
			// this.cartList =  res.map(v=>{
			// 	 // find方法找到要合并的那个对象
			// 	 const mergeObj = this.goodsList.find(item=>{
			// 		 return v.goods_id===item.goods_id
			// 	 })
			// 	 // console.log('mergeObj:',mergeObj)
			// 	 return {...v,...mergeObj}
			// })
			this.cartList = res.map(v => {
				// find方法找到要合并的那个对象
				const mergeObj = this.goodsList.find(item => v.goods_id === item.goods_id);
				// console.log('mergeObj:',mergeObj)
				return { ...v, ...mergeObj };
			});
		});
	},
	computed: {
		...mapState(['goodsList']),
		totalPrice(){
			let totalPrice=0
			this.cartList.forEach(v=>{
				// console.log("v:",v)
				totalPrice+=(v.num*v.goods_price)
			})
			return totalPrice
		},
		totalNum(){
			let totalNum=0
			this.cartList.forEach(v=>{
				totalNum+=v.num
			})
			return totalNum
		},
	}
};
</script>

<style lang="less">
.cart-container {
	height: 100vh;
	background-color: #f4f4f4;
	.empty {
		text-align: center;
		text {
			font-size: 200rpx;
			display: block;
			margin-bottom: 20rpx;
		}
	}
	.iconfont {
		font-size: 44rpx;
	}
	.address-box {
		padding-left: 15rpx;
		padding-right: 20rpx;
		position: relative;
		height: 230rpx;
		> view {
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			.label {
				margin-right: 20rpx;
			}
			.arrow {
				color: gray;
				margin-left: 50rpx;
			}
			.content {
				text-align: left;
				flex: 1;
			}
		}
		image {
			width: 750rpx;
			height: 15rpx;
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
	.title {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		text:first-child {
			margin-right: 10rpx;
		}
	}
	.goods-list {
		border-top: 1rpx solid #ddd;
		.goods-item {
			height: 210rpx;
			padding: 15rpx;
			background-color: #fff;
			display: flex;
			// box-sizing: border-box;
			align-items: center;
			.iconfont {
				color: #eb4450;
				margin: 0 30rpx;
			}

			image {
				width: 160rpx;
				height: 160rpx;
			}
			.right-box {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ddd;
			}
			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin: 0 20rpx 0 18rpx;
				.text-line2{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.btm {
					display: flex;
					margin-top: 40rpx;
					justify-content: space-between;

					.price {
						color: #eb4450;
						display: flex;

						> text {
							font-size: 24px;
						}
					}

					.goods-num {
						display: flex;
						align-items: center;

						button {
							width: 60rpx;
							height: 50rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: center;
							align-items: center;
							border: 4rpx solid #666;
						}

						text {
							margin: 0 30rpx;
						}
					}
				}
			}
		}
	}
	.goods-list {
		position: absolute;
		bottom: 98rpx;
		top: 320rpx;
		width: 100%;
		overflow: auto;
		padding-bottom: 60rpx;
		background-color: #f4f4f4;
	}

	.account {
		height: 98rpx;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: center;

		.iconfont {
			color: #eb4450;
			margin: 0 30rpx;
		}

		.account-btn {
			width: 230rpx;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #eb4450;
		}

		.select-all {
			flex: 1;
			display: flex;
			align-items: center;
			.price-wrapper {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				align-items: center;
			}
		}

		.price {
			margin-right: 20rpx;

			.num {
				color: #eb4450;
			}

			.info {
				color: #999;
			}
		}
	}
}
</style>
